<template>
  <div class="limitdiv">
    <el-form
      :model="security"
      :rules="rules"
      ref="security"
      label-width="110px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="项目号">
              <el-input v-model="security.project.projectId" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="安全检查单号">
              <el-input v-model="security.workingId" readonly></el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item
              label="项目名"
              prop="project.projectName"
              :rules="[{required: true, message: '请输入项目名称', trigger: 'blur'}]"
            >
              <el-input v-model="security.project.projectName"></el-input>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="12">
          <el-form-item label="工人安排" prop="workerName">
            <el-select v-model="security.workerName" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="15">
          <el-form-item
            label="项目种类"
            prop="project.projectMajor"
            :rules="[{required: true, message: '请选者维修种类！', trigger: 'change'}]"
          >
            <el-radio-group v-model="security.project.projectMajor">
              <el-radio label="水">水</el-radio>
              <el-radio label="电">电</el-radio>
              <el-radio label="燃气">燃气</el-radio>
              <el-radio label="其他">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="项目花费">
            <el-input v-model="security.project.projectCost">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目时间" required>
            <el-form-item prop>
              <el-date-picker v-model="security.project.projectDate" align="right" type="datetime"></el-date-picker>
            </el-form-item>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            label="安全检查地点"
            prop="project.projectPlace"
            :rules="[{required: true, message: '请输入检查地点', trigger: 'blur'}]"
          >
            <el-input v-model="security.project.projectPlace"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item
        label="安全检查内容"
        prop="project.projectNote"
        :rules="[{required: true, message: '请输入项目内容', trigger: 'blur'}]"
      >
        <el-input type="textarea" v-model="security.project.projectNote"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('security')">立即创建</el-button>
        <el-button @click="resetForm('security')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ownerId: "",
      options: [],
      tage: "",
      security: {
        project: {
          projectId: "WWJY-P-200422165421", //项目号
          projectName: "", //项目名
          projectPlace: "", //地点
          projectDate: "2020/4/21", //项目时间
          projectType: "派工", //项目类型
          projectMajor: "", //项目种类(水，电...)
          projectCost: "", //项目花费
          projectNote: "" //项目备注
        },
        workingId: "WWJY-D-200422165421",
        workerName: ""
      },
      rules: {
        workerName: [{ required: true, message: "请选择工人", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
            this.axios.post("project/setprojectpro",this.security)
            .then(res => {
              if(res.data="success")
              this.$router.push("/index_manager/projecthead")
                console.log(res)
            })
            .catch(err => {
                console.error(err); 
            })
          console.log(this.security);
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      window.location.reload();
    }
  },
  created() {
    this.ownerId = sessionStorage.getItem("userId");
    //传时间，项目号
    this.axios
      .post("project/getprojectpro?tage=S")
      .then(res => {
          this.security.project=res.data.project;
          this.security.workingId=res.data.workingId;
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
    //工人选择
    this.axios
      .get("project/getworkername")
      .then(res => {
        this.options = res.data;
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
  },
  components: {}
};
</script>

<style scope>
.limitdiv {
  width: 500;
  margin: 0 auto;
  width: 50%;
}
</style>
